<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../src/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../src/css/main.css" />
		<link rel="stylesheet" type="text/css" href="../../libs/leaflet/leaflet.css" />
		<script src="../../libs/leaflet/leaflet.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="map"></div>
		<script type="text/javascript" id="my_script">
			let map = L.map('map', {
				crs: L.CRS.EPSG4326,
				center: [32.444721222054795, 119.4224873962402], // leaflet 所有坐标都是纬度在前,经度在后的
				zoom: 16
			})
			// 这是原生方法加载天地图wmts服务
			L.tileLayer(
				'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=174705aebfe31b79b3587279e211cb9a', {
					maxZoom: 19,
					tileSize: 256,
					zoomOffset: 1
				}).addTo(map);
			L.tileLayer(
				'http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=174705aebfe31b79b3587279e211cb9a', {
					maxZoom: 19,
					tileSize: 256,
					zoomOffset: 1
				}).addTo(map);

			//用leaflet-tilelayer-wmts 会有很多问题,还是直接用原生吧
		</script>
	</body>
</html>
